<script setup lang="ts">
import { reactive, useAttrs, type PropType, computed } from 'vue';

defineOptions({ name: 'Pagination' })
const attrs = useAttrs()
interface ModelValueType {
  total?: number;
  curPage: number;
  pageSize: number;
  pageInfo?: {
    totalRows: number;
  };
}

const props = defineProps<{ modelValue: any,total?:number }>()

const total = computed(() => {  
  return props.total ?? props.modelValue.pageInfo?.totalRows ?? props.modelValue.total
})

const onSizeChange = (size: number) => {
  props.modelValue.pageSize = size
  props.modelValue.curPage = 1
}
const onCurrentChange = (curPage: number) => {
  props.modelValue.curPage = curPage
}

</script>
<template>
  <el-pagination class="px-[25px] py-[20px] bg-[#fff]" size="small" layout="total, sizes, prev, pager, next, jumper"
    :total="total" :page-sizes="[10, 20, 50, 100]" @size-change="onSizeChange"
    @current-change="onCurrentChange" v-bind="attrs">
  </el-pagination>
</template>
